<template>
    <nav class="service-nav">
        <ul class="service-category">
            <li>
                <div>{{ t('taskList.timeSort') }}</div>
                <img src="@/assets/image/triangle7@2x.png" alt="" />
            </li>
            <li>
                <div>{{ t('taskList.orderStatus') }}</div>
                <img src="@/assets/image/triangle7@2x.png" alt="" />
            </li>
            <li>
                <div>{{ t('taskList.priceSort') }}</div>
                <img src="@/assets/image/triangle3@2x.png" alt="" />
            </li>
        </ul>
        <div class="service-filter" :title="t('taskList.refresh')" @click="lacking">
            <el-icon>
                <RefreshRight />
            </el-icon>
        </div>
    </nav>
</template>

<script lang="ts" setup>
import { inject } from 'vue';
import { RefreshRight } from '@element-plus/icons-vue';
import { t } from '@/i18n';

const inject1: any = inject('reload');

function lacking() {
    inject1();
}
</script>

<style scoped>
.service-nav {
    display: flex;
    justify-content: space-between;
    height: 50px;
    background-color: var(--section-color);
    border-radius: var(--border-radius);
    margin-bottom: 4px;
}

.service-category {
    display: flex;
}

.service-category > li {
    display: flex;
    align-items: center;
    padding: 0 40px;
    margin-right: 30px;
}

.service-category > li > div {
    margin-right: 5px;
}

.service-category > li > img {
    width: 8px;
    height: 10px;
}

.service-category > li :nth-child(1) img {
    width: 10px;
    height: 5px;
}

.service-category > li :nth-child(2) img {
    width: 10px;
    height: 5px;
}

.service-filter {
    margin-right: 30px;
    line-height: 50px;
}
</style>
